<template>
  <view class="physics-detail">
    <!-- 顶部图片区域 -->
    <view class="hero-section">
      <cover-image
        :src="url('ic', typeToIndex[currentType], 'png')"
        mode="aspectFill"
        class="hero-image"
      ></cover-image>
      <view class="hero-overlay">
        <text class="hero-title">{{ physicsData.title }}</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-section">
      <!-- 简介部分 -->
      <view class="intro-section">
        <text class="section-title">
          <text class="title-icon">◈</text>
          简介
        </text>
        <view class="intro-text">{{ physicsData.introduction }}</view>
      </view>

      <!-- 特色内容 -->
      <view class="features-section">
        <text class="section-title">
          <text class="title-icon">◈</text>
          {{ typeToApplicationTitle[currentType] || '应用' }}
        </text>
        <view class="features-grid">
          <view
            v-for="(feature, index) in physicsData.features"
            :key="index"
            class="feature-card"
            @click="navigateToFeatureDetail(feature)"
          >
            <view class="feature-icon">
              <text :class="['bi', feature.icon]"></text>
            </view>
            <text class="feature-title">{{ feature.title }}</text>
            <text class="feature-desc">{{ feature.description }}</text>
          </view>
        </view>
      </view>

      <!-- 历史发展 -->
      <view class="history-section">
        <text class="section-title">
          <text class="title-icon">◈</text>
          热学应用历史发展
        </text>
        <view class="timeline">
          <view
            v-for="(event, index) in physicsData.history"
            :key="index"
            class="timeline-item"
          >
            <view class="timeline-dot"></view>
            <view class="timeline-content">
              <text class="timeline-year">{{ event.year }}</text>
              <text class="timeline-text">{{ event.description }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

const url = $url;
const currentType = ref("");
const physicsData = ref({
  title: "",
  introduction: "",
  features: [],
  history: [],
});

// 添加导航方法
const navigateToFeatureDetail = (feature) => {
  // 跳转到详情页，传递参数
  uni.navigateTo({
    url: `/pages/other/physics/feature-detail?type=${currentType.value}&feature=${encodeURIComponent(JSON.stringify(feature))}`
  });
};

// 添加图片索引映射
const typeToIndex = {
  acoustics: 0,
  mechanics: 1,
  electronics: 2,
  thermodynamics: 3,
  optics: 4,
  experiments: 5,
};

// 添加应用类型标题映射
const typeToApplicationTitle = {
  acoustics: "声学应用",
  mechanics: "力学应用",
  electronics: "电学应用",
  thermodynamics: "热学应用",
  optics: "光学应用",
  experiments: "实验应用",
};

// 物理学科数据
const physicsTypes = {
  acoustics: {
    title: "声学：声动天籁",
    introduction:
      "声学是研究声波产生、传播、接收的科学。中国古代在声学领域有着深厚的研究传统，从编钟、排箫到各类乐器的制作，都体现了先人对声学规律的深刻理解。",
    features: [
      {
        icon: "bi-music-note-beamed",
        title: "乐器应用",
        description: "编钟、排箫等传统乐器的制作与调音技术",
        fullDescription: "中国古代在音乐乐器方面有着辉煌成就，特别是编钟和排箫的制作工艺。编钟是我国古代重要的打击乐器，商周时期已经发展成熟，音律精确。排箫则是一种管乐器，由不同长度的竹管排列而成，能演奏出优美的旋律。古人通过经验和实践，掌握了声音产生和传播的基本规律。"
      },
      {
        icon: "bi-soundwave",
        title: "建筑声学",
        description: "古代建筑中的声学设计，如钟楼、戏台的声学效果",
        fullDescription: "中国古代建筑中蕴含着丰富的声学智慧。古代戏台的设计考虑到了声音传播和反射，使得演员的声音能够传达到观众席的每个角落。钟楼的设计则考虑到钟声的扩散方向，使其声音能够传播更远。宫殿和寺庙的建筑设计也注重声学效果，创造出特殊的回音和共鸣空间。"
      },
      {
        icon: "bi-ear",
        title: "军事应用",
        description: "军事中的声音传递，如号角、战鼓等信号系统",
        fullDescription: "声音在古代军事中扮演着重要的通讯工具角色。战场上的号角、战鼓等乐器被用来传递军事指令，不同的鼓点和号声代表不同的命令。古人根据声音传播特性，设计了一套完整的声音信号系统，使得在嘈杂的战场环境中仍能有效传递指令，协调军队行动。"
      },
    ],
    history: [
      {
        year: "公元前2000年",
        description: "编钟的发明和使用，展现了古人对音律的认识",
      },
      {
        year: "战国时期",
        description: "墨子在《墨经》中对声音传播现象进行描述",
      },
      { year: "汉代", description: "张衡发明候风地动仪，利用声学原理测定地震" },
    ],
  },
  mechanics: {
    title: "力学：力驭万象",
    introduction:
      "力学是研究物体运动规律和相互作用的科学。中国古代在力学应用方面有着丰富的实践，从简单机械到复杂工程，都展现了独特的智慧。",
    features: [
      {
        icon: "bi-gear",
        title: "水利工程",
        description: "都江堰、郑国渠等水利工程中的力学应用",
        fullDescription: "中国古代水利工程是力学应用的杰出代表。秦代李冰主持修建的都江堰至今仍在发挥作用，其设计巧妙利用水流动力学原理，通过分水鱼嘴、飞沙堰等结构调节水流。郑国渠、灵渠等大型水利工程则展现了古人对水力和地形的深刻理解，他们通过精确的测量和计算，实现了水流的有效调控和引导。"
      },
      {
        icon: "bi-building",
        title: "建筑工程",
        description: "斗拱、悬臂等古代建筑结构中的力学原理",
        fullDescription: "中国古代建筑中的力学智慧集中体现在结构设计上。斗拱结构是中国传统木构建筑的精髓，它通过多层叠落的构件分散上部重量，减轻檐部荷载，同时提高建筑的抗震性能。悬臂结构在桥梁和台阁建筑中广泛应用，通过合理分配力的作用点，实现大跨度空间。这些设计都体现了古人对力学平衡和材料特性的深刻认识。"
      },
      {
        icon: "bi-tools",
        title: "军事器械",
        description: "诸葛连弩、投石机等军事装备中的力学应用",
        fullDescription: "中国古代军事装备中蕴含着丰富的力学原理应用。诸葛连弩通过机械装置实现连续发射，提高了作战效率；投石机利用杠杆原理和势能转化，将小力转为大力，投掷重物攻击敌人；古代冷兵器的设计也考虑了力学因素，如刀剑的重心分配、箭矢的气动特性等，都是力学智慧的体现。"
      },
    ],
    history: [
      { year: "春秋战国", description: "诸葛亮发明木牛流马，应用力学原理" },
      { year: "汉代", description: "张衡发明地动仪，利用惯性原理测定地震" },
      { year: "宋代", description: "发明指南针，利用磁力原理指示方向" },
    ],
  },
  electronics: {
    title: "电学：电光初绽",
    introduction:
      '中国古代物理电学虽然尚未形成系统的科学理论，但在一些古籍中已有对电现象的观察和记载。例如，《淮南子》中提到了"琥珀拾芥"现象，即摩擦后的琥珀能够吸引轻小物体，这实际上是静电现象的早期描述。',
    features: [
      {
        icon: "bi-lightning",
        title: "避雷技术",
        description: "古代建筑中的避雷设计与应用",
        fullDescription: "中国古代在避雷技术方面有着独特的实践经验。古人观察到高耸建筑容易遭受雷击，因此在塔楼、宝塔等高建筑上安装金属构件，如铜质宝瓶、铁制刹、金属链等，这些在某种程度上起到了避雷针的作用。寺庙和宫殿建筑中也采用了一些避雷设计，减少雷击损害，展现了古人对雷电现象的初步认识。"
      },
      {
        icon: "bi-battery",
        title: "磁石应用",
        description: "指南针等航海工具中的电磁应用",
        fullDescription: "磁石应用是中国古代电磁学的重要成就。司南和指南针的发明利用了磁石指向的特性，为航海和陆地导航提供了重要工具。北宋时期，已经出现了较为精确的指南针，对海上丝绸之路的开辟起到了关键作用。古人还发现了磁石的医疗价值，将其用于针灸和治疗，这反映了古人对磁性作用的初步认识和实际应用。"
      },
      {
        icon: "bi-broadcast",
        title: "医疗应用",
        description: "针灸、电疗等传统医学中的电学应用",
        fullDescription: "中国传统医学中包含了一些与电学相关的应用。针灸疗法中的经络学说，虽然与现代电学概念不同，但其描述的人体能量流动与电流有某些相似之处。古代医书中记载的一些治疗方法，如用特定金属接触身体特定部位，在现代看来可能涉及了微弱电流的作用。这些实践虽然缺乏系统理论支持，但反映了古人对人体电生理现象的朴素认识。"
      },
    ],
    history: [
      { year: "先秦时期", description: "《周易》中记载对雷电现象的观察" },
      { year: "汉代", description: "王充在《论衡》中探讨雷电本质" },
      { year: "明清时期", description: "开始接触和研究西方电学知识" },
    ],
  },
  thermodynamics: {
    title: "热学：炽理传薪",
    introduction:
      "热学研究热现象及其规律。中国古代在冶金、陶瓷等领域对热的应用达到很高水平。",
    features: [
      {
        icon: "bi-fire",
        title: "冶炼技术",
        description: "青铜器、铁器冶炼中的温度控制技术",
        fullDescription: "中国古代冶炼技术是热学应用的杰出代表。商周时期，青铜冶炼工艺已相当成熟，能够精确控制合金成分和冶炼温度。汉代以后，铁器冶炼技术迅速发展，古人通过设计不同形状的炉子、控制鼓风强度和使用特定燃料，实现对冶炼温度的精确控制。这些技术使中国古代的金属工艺处于世界领先地位，反映了古人对热传递和材料变化规律的深刻理解。"
      },
      {
        icon: "bi-cup-hot",
        title: "陶瓷工艺",
        description: "瓷器烧制中的窑炉温度调控技术",
        fullDescription: "中国是瓷器的发源地，古代陶瓷烧制技艺代表了热学应用的高峰。宋代龙窑和馒头窑的设计考虑了热气流动和温度分布，通过控制窑内气流和燃料分布，创造出不同温度区域满足不同瓷器的烧制需求。景德镇瓷器烧制中的青花发色技术，要求精确控制1300℃以上的高温和特定的氧化还原环境，这些都体现了古人对热学规律的精准把握。"
      },
      {
        icon: "bi-thermometer",
        title: "建筑保温",
        description: "传统民居的保温降温建筑设计",
        fullDescription: "中国古代建筑中包含了丰富的热学智慧。北方的窑洞和炕床设计利用了土壤的蓄热特性，提供冬暖夏凉的居住环境；南方民居的通风设计则充分考虑了热空气流动规律，形成自然通风降温系统。四合院的布局也考虑了阳光照射和热辐射，最大化冬季采光和夏季遮阳。这些设计都是古人对热传递规律认识的实际应用，创造了舒适的生活环境。"
      },
    ],
    history: [
      { year: "商周时期", description: "青铜器制作工艺的发展" },
      { year: "汉代", description: "发明水力翻车，利用水能转化" },
      { year: "宋代", description: "瓷器烧制技术达到顶峰" },
    ],
  },
  optics: {
    title: "光学：光影奇缘",
    introduction:
      "光学研究光的性质和规律。中国古代在天文观测、镜子制作等方面有独特贡献。",
    features: [
      {
        icon: "bi-brightness-high",
        title: "天文仪器",
        description: "浑天仪、圭表等天文观测仪器的应用",
        fullDescription: "中国古代天文仪器是光学应用的重要领域。浑天仪通过复杂的机械结构模拟天体运行，帮助观测和预测天象；圭表则利用日影测量时间和季节变化，其精度令人惊叹。东汉张衡发明的候风地动仪和浑天仪都体现了古人对光学原理的应用。宋代天文学家苏颂设计的水运仪象台，结合了光学观测和机械运转，是古代科技的杰出代表。"
      },
      {
        icon: "bi-mirror",
        title: "青铜镜术",
        description: "古代青铜镜的制作与光学应用",
        fullDescription: "中国古代青铜镜的制作工艺展现了高超的光学技术。先秦至汉代的青铜镜已能通过特殊的抛光工艺获得良好的反射效果。传说中的透光镜虽不可能真正透光，但古代青铜镜的精细铸造和磨制工艺确实达到了较高水平。唐宋时期的铜镜背面往往有精美图案和诗文，而正面则磨制得光可鉴人，反映了古人对金属表面光学特性的理解和应用。"
      },
      {
        icon: "bi-eye",
        title: "建筑采光",
        description: "古代建筑中的采光设计与应用",
        fullDescription: "中国古代建筑中蕴含着丰富的光学智慧。北方宫殿建筑通常采用精心计算的窗户位置和大小，使室内光线柔和而充足；南方园林建筑则通过漏窗、花窗等设计，创造出丰富多变的光影效果。佛寺和宫殿建筑中，常用特定材料如云母、蚌壳等制作窗户，既能透光又能营造特殊氛围。这些设计都体现了古人对光传播和视觉效果的深刻理解。"
      },
    ],
    history: [
      { year: "战国时期", description: "墨子提出光的直线传播原理" },
      { year: "汉代", description: "青铜镜制作工艺达到高峰" },
      { year: "宋代", description: "发展针孔成像等光学技术" },
    ],
  },
  experiments: {
    title: "物理实验：格物致知",
    introduction:
      "物理实验是验证物理规律的重要手段。中国古代的实验探索展现了朴素的科学精神。",
    features: [
      {
        icon: "bi-clipboard-data",
        title: "测量应用",
        description: "日晷、水钟等计时测量工具的应用",
        fullDescription: "中国古代的测量工具展现了实验物理的早期发展。日晷利用太阳投影原理测量时间，古人根据不同季节和地区设计出精确的刻度；水钟（漏壶）则利用水流速度恒定的原理计时，汉代张衡改进的水钟精度大大提高。此外，古人还发明了量衡器具、绳墨尺等测量工具，用于建筑和工程测量。这些测量装置都体现了古人对物理规律的实验认识和实际应用。"
      },
      {
        icon: "bi-tools",
        title: "观测应用",
        description: "浑天仪、候风地动仪等观测仪器的应用",
        fullDescription: "中国古代观测仪器是科学实验精神的体现。浑天仪通过模拟天体运行规律，帮助人们观测和预测天象；候风地动仪则通过精密机械结构感知地震波动，是世界上最早的地震仪器。宋代沈括在《梦溪笔谈》中记录了大量自然观察实验，包括对磁偏角的发现。这些观测工具和记录都展现了古人对自然现象的系统观察和实验探索精神。"
      },
      {
        icon: "bi-graph-up",
        title: "工程应用",
        description: "古代工程中的实验方法与应用",
        fullDescription: "中国古代工程建设中融入了丰富的实验方法。大型水利工程如都江堰的修建，先要进行水流模拟和地形测量；桥梁建设前，古人会通过缩小模型测试结构强度；城墙建设中，通过夯实实验确定最佳夯打次数和力度。《九章算术》和《墨经》中记载了大量工程计算方法，这些都是古人将实验认识应用于工程实践的例证，体现了古代科学实验精神。"
      },
    ],
    history: [
      { year: "战国时期", description: "墨子进行光学实验研究" },
      { year: "汉代", description: "张衡发明浑天仪等科学仪器" },
      { year: "宋代", description: "沈括记录大量科学实验观察" },
    ],
  },
};

onMounted(() => {
  // 获取路由参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const type = currentPage.$page?.options?.type || "acoustics";

  currentType.value = type;
  physicsData.value = physicsTypes[type] || physicsTypes.acoustics;
});
</script>

<style lang="scss" scoped>
.physics-detail {
  min-height: 100vh;
}

.hero-section {
  position: relative;
  height: 400rpx;

  .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.6)
    );
    display: flex;
    align-items: center;
    justify-content: center;

    .hero-title {
      color: #fff;
      font-size: 48rpx;
      font-weight: bold;
      text-align: center;
    }
  }
}

.content-section {
  background: url(https://epoch.jxksd.top/mo/images/dbg.png) no-repeat top
    center/cover;

  border-radius: 40rpx 40rpx 0 0;
  margin-top: -40rpx;
  padding: 40rpx;
  position: relative;
  z-index: 1;
}

.intro-section {
  margin-bottom: 60rpx;

  .intro-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.8;
  }
}

.features-section {
  margin-bottom: 60rpx;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.feature-card {
  background: #f8f8f8;
  padding: 30rpx;
  border-radius: 16rpx;
  text-align: center;

  .feature-icon {
    font-size: 48rpx;
    color: var(--td-brand-color);
    margin-bottom: 20rpx;
  }

  .feature-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
    display: block;
  }

  .feature-desc {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
  }
}

.timeline {
  position: relative;
  padding-left: 40rpx;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2rpx;
    background: #ddd;
  }
}

.timeline-item {
  position: relative;
  padding-bottom: 40rpx;

  .timeline-dot {
    position: absolute;
    left: -44rpx;
    top: 6rpx;
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: var(--td-brand-color);
    border: 4rpx solid #fff;
  }

  .timeline-content {
    background: #f8f8f8;
    padding: 20rpx;
    border-radius: 12rpx;

    .timeline-year {
      font-size: 28rpx;
      font-weight: bold;
      color: var(--td-brand-color);
      margin-bottom: 10rpx;
      display: block;
    }

    .timeline-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}
</style>
